<template>
    <view class="page">
        <view class="title">
            <text>市场调查系统</text>
            <text>品质提升评估工作服务平台</text>
        </view>
        <view class="form">
            <view class="item">
                <text>请输入账号</text>
                <input type="text" v-model="user.username" />
            </view>
            <view class="item">
                <text>请输入密码</text>
                <view class="password">
                    <input type="password" v-model="user.password" />
                </view>
            </view>
            <view class="item" style="margin-top: 160rpx">
                <button @click="login" :loading="loading">登 录</button>
            </view>
        </view>
    </view>
</template>
<script>
import { login } from "@/api/login";
export default {
    data() {
        return {
            user: {},
            loading: false,
        };
    },
    methods: {
        // 登录 只允许 考评员、街道管理员、和村管理员
        login() {
            let username = this.user.username,
                password = this.user.password;
            if (!username || !password) uni.showToast({ title: "请输入账号密码", icon: "none" });
            else {
                this.loading = true;
                login({ username, password })
                    .then((res) => {
                        uni.setStorage({
                            key: "user",
                            data: JSON.stringify(res.user),
                            success: function () {
                                uni.redirectTo({ url: "/pages/evaluate/index" });
                            },
                        });
                    })
                    .finally(() => {
                        this.loading = false;
                    });
            }
        },
    }
};
</script>
<style lang="scss" scoped>
.page {
    padding: 0 40rpx;
    padding-top: 200rpx;
    background-image: url(/static/images/bg-pattern.png);
    background-color: #409eff;
    min-height: 100vh;
    background-position: center;
    background-size: cover;
    box-sizing: border-box;

    >.title {
        font-size: 40rpx;
        text-align: center;
        color: #fff;

        text {
            display: block;
            line-height: 60rpx;
        }
    }


    .form {
        margin-top: 88rpx;

        .item {
            text {
                font-size: 32rpx;
                margin: 20rpx 0;
                display: block;
                color: #fff;
            }

            input {
                width: 100%;
                display: block;
                line-height: 80rpx;
                height: 80rpx;
                padding: 0 20rpx;
                box-sizing: border-box;
                border: 1px solid #fff;
                border-radius: 20rpx;
                color: #fff;
            }

            button {
                border-radius: 20rpx;
            }
        }

    }
}
</style>